<script lang="ts" setup>
import Cell from '@/components/ChessBoard/Cell/index.vue'
import useGame from '@/hooks/useGame'

const { chessBoard, init, handleKeyUp } = useGame()
</script>

<template>
  <!-- 棋盘 -->
  <div class="chessboard">
    <div class="row" v-for="(row, rowIndex) in chessBoard" :key="rowIndex">
      <Cell  
        v-for="(cell, colIndex) in row"  
        :key="`${rowIndex}-${colIndex}`"  
        :row="rowIndex"  
        :col="colIndex"  
        :value="cell.value"  
      />  
    </div>
    <button @click="init()" @keyup="handleKeyUp">开始游戏</button>
  </div>
</template>

<style lang="less" scoped>
.chessboard {  
  width: max-content;
  margin: 0 auto;

  .row {
    display: flex;
    max-width: max-content;

    &:nth-child(1) > .cell {
      padding-top: 10px;
    }

    &:nth-child(4) > .cell {
      padding-bottom: 10px;
    }

    >:nth-child(1) {
      padding-left: 10px;
    }

    >:nth-child(4) {
      padding-right: 10px;
    }
  }

  button {
    margin: 20px auto;
    display: block;
    width: 100%;
    height: 55px;
    background-color: #e9c47f;
    font-size: 24px;
    color: #474747;
    border: 1px solid #dadada;
    cursor: pointer;
    &:hover {
      background-color: #e2ba71;
      color: #474747;
      border: 0;
    }
    &:focus {
      outline: none;
    }
    &:active {
      background-color: #e6c589;
    }
  }
}
</style>
